<template>
	<view>
		<wd-form ref="form" :model="model">
			<wd-cell-group border>
				<wd-picker required :label-width="labelWidth" :columns="userReliableColumns" label="用户类型" v-model="model.reliable" />
				<wd-datetime-picker required v-if="reliableCellShow" :label-width="labelWidth" v-model="model.reliable_date" label="有效期至" />
				<wd-picker :label-width="labelWidth" :columns="userGenderColumns" label="性别" v-model="model.gender" />
				<wd-input label="昵称" :label-width="labelWidth" clearable v-model="model.nickname" placeholder="用户昵称" />
				<wd-input label="用户名" :label-width="labelWidth" prop="username" clearable v-model="model.username"
					placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
				<wd-input label="密码" :label-width="labelWidth" prop="password" show-password clearable
					v-model="model.password" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
			</wd-cell-group>
			<view class="footer">
				<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
			</view>
		</wd-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue'

	const labelWidth = ref("80px")
	
	// 有效期选择器是否显示
	const reliableCellShow = ref(false)
	
	const userReliableColumns = ref([{
		label: "正式用户",
		value: 1
	}, {
		label: "临时用户",
		value: 0
	}])
	const userGenderColumns = ref([{
			label: "保密",
			value: 0
		},
		{
			label: "男",
			value: 1
		},
		{
			label: "女",
			value: 2
		}
	])

	const model = reactive({
		nickname: "",
		// 是否为正式用户
		reliable: 1,
		// 有效期至
		reliable_date: null,
		avatar: "",
		// 用户名
		username: "",
		// 密码
		password: "",
		// 性别
		gender: 0,
		// 备注
		comment: "",
	})

	watch(() => model.reliable, (newName, oldName) => {
		let showStatus = Boolean(newName)
		reliableCellShow.value = !showStatus
	});

	const form = ref()
	
	// 点击提交
	function handleSubmit() {
		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					console.log("验证通过");
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
</script>

<style>
.footer{
	padding: 45rpx;
}
</style>